<template>
  <div class="analytics-view">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
            </div>
          </template>
          <div ref="lineChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>短链点击量</span>
            </div>
          </template>
          <div ref="barChart" style="height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>设备分布</span>
            </div>
          </template>
          <div ref="pieChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const lineChart = ref(null)
const barChart = ref(null)
const pieChart = ref(null)

onMounted(() => {
  initCharts()
})

const initCharts = () => {
  // 折线图
  const lineInstance = echarts.init(lineChart.value)
  lineInstance.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['访问量', '独立访客']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '访问量',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '独立访客',
        type: 'line',
        data: [80, 93, 65, 97, 60, 150, 130]
      }
    ]
  })

  // 柱状图
  const barInstance = echarts.init(barChart.value)
  barInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['短链1', '短链2', '短链3', '短链4', '短链5']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [320, 200, 150, 80, 70],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  })

  // 饼图
  const pieInstance = echarts.init(pieChart.value)
  pieInstance.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [
      {
        name: '设备分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'PC端' },
          { value: 735, name: '移动端' },
          { value: 580, name: '平板' }
        ]
      }
    ]
  })

  // 响应式调整
  window.addEventListener('resize', () => {
    lineInstance.resize()
    barInstance.resize()
    pieInstance.resize()
  })
}
</script>

<style scoped>
.analytics-view {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
